<template>
  <div id="stage">
    <div id="stage-bg" :style="displaycss"></div>
    <Chart v-for="chart in charts"
      :key="chart.id"
      :color="stage.display.globalColor"
      :component="chart"
      :grid="stage.grid"
      :bsId="bsId"
      @showDrillTable="showDrillTable"
    ></Chart>
    <el-dialog title="详情" :visible.sync="drillDetail.show"  top="50px">
      <el-table :data="drillDetail.data" height="800px">
        <el-table-column v-for="column in drillDetail.columns" :prop="column.field_name" :label="column.show_name"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import Services from '@/services/'
import Chart from '@/page/components/pchart'
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
  components: { Chart },
  data(){
    return{
      bsId: 0,
      active: {},
      scale: 1,
      datasource: [],
      charts: [],
      stage: {
        width: 1920,
        height: 1080,
        scale: 1,
        grid: 10,
        display: {},
      },
      drillDetail: {
        show: false,
        columns: [],
        data: [],
      }
    }
  },
  computed: {
    displaycss(){
      return {
        background : this.stage.display.backImg ? "url('" + this.stage.display.backImg + "')" : '#fff'
      }
    }
  },
  mounted(){
    const stage = document.getElementById('stage')
    const parentNode = stage.parentNode
    let height = parentNode.offsetHeight;
    let width = parentNode.offsetWidth;
    const ratio = 1920/1080
    let nw = 0, nh = 0;
    if(width/height > ratio){
      nw = width/ratio
      nh = height
    } else {
      nw = width
      nh = height/ratio
    }
    this.scale = nw / 1920
  },
  created(){
    this.releaseId = this.$route.params.id
    this.init()
  },
  methods:{
    init(){
      Services.DISPLAYS_PREVIEW({
        releaseId: this.releaseId
      }).then(res => {
        this.charts = res.components
        this.stage.display = res.base
        // this.stage.globalColor = res.base.globalColor
        this.bsId = res.base.id
      })
    },
    showDrillTable(chartId, payload){
      const vm = this
      Services.DRILL_OPTION({
        chartId: chartId,
        queryParams: payload
      }).then(res => {
        vm.drillDetail.columns = res.dataMapping
        vm.drillDetail.data = res.dataValue
        vm.drillDetail.show = true
        console.log(vm.drillDetail)
      })
    }
  }
}
</script>
<style lang="less">
#stage{
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
  position: relative;
}
#stage-bg{
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100% 100%;
  // opacity: .4;
  top: 0;
  left: 0;
}
  
</style>
